<template>
	<view>
		<!-- 搜索框部分 -->
		<music title="网易云音乐" :iconList="['','']"></music>
		
		<!-- 写一个滚动范围 -->
		<!-- <scroll-view class="myScroll"> -->
			
			
			<!-- 搜索栏 -->
			<view class="searchInput">
					<view class="searchInputContent">
						<span class="iconfont" @click="searchByName">&#x101d4;</span>
						<!--  @blur="searchByName" -->
						<input placeholder="搜索歌曲" v-model="searchMusicName" @click="isClickEvent"/> 
					</view>
			</view>
			
			<!-- 用户点击搜索的时候，他用户的热搜提示 -->
			<view class="showInfo" v-if="isClick">
				<veiw class="showInfoRow1">
					热搜榜
				</veiw>
				<template v-for="(item,index) in hotSearch" :key="index"> 
					<view class="showInfoRow2" @click="clickMusic(item.searchWord)">
						<veiw>
							<veiw>{{index + 1}}</veiw>
							<view>{{item.searchWord}}</view>
						</veiw>
						<view>{{item.score}}</view>
					</view>
				</template>
				
			</view>
			
			<!-- 显示当前的几个热榜 -->
			<template v-for="(item,index) in arrayMusicInfo">
				
				<view class="topList" @click="toDemo01(item.id)">
					<!-- <view class="topListLeft" --> <!-- :style="{'background-image': `url(${item.coverImgUrl})` }"> -->
					<view class="topListLeft">
						<image :src="item.coverImgUrl" mode="aspectFill"></image>
					</view>
					<view class="topListRight">
						<template v-for="(it1,in1) in item.tracks">
							<text>{{ it1.first }} {{ it1.second }}</text>
						</template>
					</view>
				</view>
			</template>
		<!-- </scroll-view> -->
		
	</view>
	
		
	
</template>

<script setup>
	import {ref} from "vue";
	import '@/common/iconfont.css'
	import music from "../../component/musciHead/musciHead.vue"
	import {onMounted} from "vue";
	
	let arrayMusicInfo = ref([])
	let searchMusicName = ref("")
	let isClick = ref(false)
	let hotSearch = ref([])
	function toDemo01(id){
		console.log(id)
		uni.navigateTo({
			url:"/pages/demo01/demo01?id=" + id
		})
	}
	function clickMusic(name){
		console.log("name",name)
		searchMusicName.value = name
		searchByName()
	}
	function searchByName(){
		// console.log("输出searchMusicName.value",searchMusicName.value)
		//携带这个Name，跳转到列表页面
		uni.navigateTo({
			url:"/pages/musicSearchList/musicSearchList?musicName=" + searchMusicName.value
		})
	}
	function isClickEvent(){
		console.log("用户点击触发")
		// 拿到热搜数据
		uni.request({
			url:"http://localhost:3000/search/hot/detail",
			success: (res) => {
				// console.log("热搜",res)
				hotSearch.value = res.data.data
				console.log(hotSearch.value)
			}
		})
		isClick.value = !isClick.value
	
	}
	components :{
		music
	}
	
	onMounted(() => {
		uni.request({
			url: "http://localhost:3000/toplist/detail",
			success: (ref)=>{
				console.log(ref.data.list)
				// sessionStorage.setItem('allMusic', ref.data.list)
				for(let i = 0; i < 4 ;i++){
						arrayMusicInfo.value[i] = ref.data.list[i];
				} 
				
				console.log(arrayMusicInfo)
			}
		})
		
	});
	
	
	
</script>

<style lang="scss" scoped>
	.myScroll{
		height: 1300rpx; 
		width: 100%; 
		// background: #000;
	}
	.searchInput{
		width: 100%;
		height: 70rpx;
		margin-top: 50rpx;
		// margin-bottom: 20rpx;
		// background-color: #000;
		display: flex;
		justify-content: center;
		.searchInputContent{
			width: 90%;
			height: 100%;
			border-radius: 40rpx;
			background: #c8c8c8;
			display: flex;
			span{
				margin-left: 30rpx;
				margin-top: 20rpx;
			}
			input{
				margin-left: 30rpx;
				margin-top: 10rpx;
			}
		}
	}
	.topList{
		width: 90%;
		height: 250rpx;
		background: lightgreen;
		margin: 10rpx auto;
		display: flex;
		justify-content: space-between;
		>:nth-child(1){
			width: 40%;
			height: 100%;
			// background: #000;
			background: url("https://p1.music.126.net/rIi7Qzy2i2Y_1QD7cd0MYA==/109951170048506929.jpg");

		}
		>:nth-child(2){
			width: 60%;
			height: 100%;
			background: #fff;
			display: flex;
			flex-direction: column;
			text{
				color: #000;
				margin: 20rpx;
				display: inline-flex;
			}
		}
	}
	
	.topListLeft{
		image{
			width: 100%;
			height: 100%;
		}
	}
	
	.showInfo{
		width: 90%;
		// height: 500rpx;
		margin: 0 auto;
		margin-top: 10rpx;
		margin-bottom: 20rpx;
		background: #d2d2d2;
		.showInfoRow1{
			margin: 20rpx;
			color: #ff3c3f;
			font-weight: 800;
		}
		.showInfoRow2{
			margin: 20rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			>:nth-child(1){
				display: flex;
				flex-direction: row;
				>:nth-last-child(1){
					margin-left: 30rpx;
				}
			}
		}
	}
</style>
